<template>
	<view class="main">
		<view class="cardList">
			<view class="item" @tap="routerTo(`/pageB/addcard?id=${item.id}`)" v-for="(item,index) in list" :key="index">
				<view class="a">
					<text>{{item.bankname}}</text>
					<text>{{item.banknumber}}</text>
				</view>
				<view class="a">
					<text>{{item.bankholder}}</text>
					<text>{{item.mobile}}</text>
				</view>
				<view class="a">
					<text>{{item.IDcard}}</text>
				</view>
				<view class="fn">
					<view class="moren">
						<image v-if="item.status == 1" src="@/static/img/Group.png" mode=""></image>
						<image v-else src="@/static/img/noGroup.png" mode=""></image>
						默认
					</view>
				</view>
			</view>
		</view>
		<view class="btn" @tap="routerTo('/pageB/addcard')">
			添加
		</view>
	</view>
</template>

<script>
	import {
		banksindex,
		banksread
	} from '@/api/index.js'
	export default{
		data(){
			return{
				list:[]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.getList()
		},
		methods:{
			async getList(){
				let res = await banksindex()
				this.list = res.data
			},
			routerTo(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f6f6f6;
		padding: 40rpx 30rpx;
		.cardList{
			.item{
				padding: 20rpx 30rpx;
				background-color: #fff;
				border-radius: 12rpx;
				color: #000;
				margin-bottom: 40rpx;
				.a{
					display: flex;
					justify-content: space-between;
					padding-bottom: 20rpx;
					border-bottom: 2rpx solid #ddd;
					margin-bottom: 20rpx;
				}
				.fn {
					display: flex;
					justify-content: space-between;
					align-items: center;
				
					.moren {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #000;
				
						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 14rpx;
						}
					}
				
					.del {
						font-size: 28rpx;
						color: #000;
					}
				}
			}
		}
		.btn{
			width: 100%;
			padding: 30rpx;
			text-align: center;
			color: #fff;
			background-color: #ea504f;
			border-radius: 10rpx;
		}
	}
</style>